<div class="chart-block" [ngClass]="isMobile? '': 'chart-block-height'" style="position: relative; ">

  <div style="height: 20px; background-color: #f0f2f5;width: 100%; position: absolute; top: 450px;left: 0"
       *ngIf="isMobile"></div>
  <nz-tabset [nzAnimated]="false" [nzTabBarExtraContent]="extraTemplate" (nzSelectedIndexChange)="curTabIndex($event)">
    <nz-tab nzTitle="销售额" [nzForceRender]="true" (nzSelect)="selectSales()">
      <div nz-row [nzGutter]="20">
        <div nz-col nzXs="24" nzSm="24" nzMd="18" nzLg="18" nzXl="18">
          <div id="daySales" #daySales *ngIf="type=='day'"></div>
          <div id="monthSales" #monthSales *ngIf="type=='month'"></div>
        </div>

        <div nz-col nzXs="24" nzSm="24" nzMd="6" nzLg="6" nzXl="6" [ngClass]="isMobile?'margin-top-20':''">
          <div class="ranking" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
            <!-- 这里只计算合作伙伴直属的运营商交易量，不计算该合作伙伴下级的运营商-->
            <h3><span *ngIf="type == 'month'">{{year}}年度</span><span *ngIf="type=='day'">{{month}}月份</span>运营商销量排行</h3>
            <div class="ranking-list"  *ngIf="userTurnoverTopList.length > 0">
              <div class="ranking-item" *ngFor="let item of userTurnoverTopList; let i = index">
                <div class="flex">
                  <div class="number" [ngClass]="i<3?'top-three':''">{{i + 1}}</div>
                  <div class="hide">{{item.userName}}{{item.name}}</div>
                </div>
                <div>{{item.turnover  | number:'0.2-2'}}</div>
              </div>
            </div>
            <div *ngIf="userTurnoverTopList.length <= 0">
              <div>
                <span style="color: #999999">
                  暂无排名信息
                </span>
              </div>
            </div>
          </div>
          <div class="ranking" *ngIf="userInfo.roleId == roleIdEnum.MERCHANT || userInfo.roleId == roleIdEnum.SUB_ACCOUNT">
            <!-- 这里只计算合作伙伴直属的运营商交易量，不计算该合作伙伴下级的运营商-->
            <h3>
              <span *ngIf="type == 'month'">
                <span>{{year}}</span>
                <span>年度</span>
                <span>门店销量排行（不含本月）</span>
              </span>
              <span *ngIf="type=='day'">
                <span>{{month}}</span>
                <span>月份</span>
                <span>门店销量排行（不含今天）</span>
              </span>
            </h3>
            <div class="ranking-list"  *ngIf="merchantTurnoverTopList.length > 0">
              <div class="ranking-item" *ngFor="let item of merchantTurnoverTopList; let i = index">
                <div class="flex">
                  <div class="number" [ngClass]="i<3?'top-three':''">{{i + 1}}</div>
                  <div class="hide">{{item.storeName}}</div>
                </div>
                <div>{{item.turnover  | number:'0.2-2'}}</div>
              </div>
            </div>
            <div *ngIf="merchantTurnoverTopList.length <= 0">
              <div>
                <span style="color: #999999">
                  暂无排名信息
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nz-tab>
    <nz-tab nzTitle="交易笔数" [nzForceRender]="true" (nzSelect)="selectCount()">
      <div nz-row [nzGutter]="20">
        <div nz-col nzXs="24" nzSm="24" nzMd="18" nzLg="18" nzXl="18">
          <div id="dayCount" #dayCount *ngIf="type=='day'"></div>
          <div id="monthCount" #monthCount *ngIf="type=='month'"></div>
        </div>
        <div nz-col nzXs="24" nzSm="24" nzMd="6" nzLg="6" nzXl="6">
          <div class="ranking" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
            <!-- 这里只计算合作伙伴直属的运营商交易笔数，不计算该合作伙伴下级的运营商-->
            <h3><span *ngIf="type == 'month'">{{year}}年度</span><span *ngIf="type=='day'">{{month}}月份</span>运营商交易笔数排行</h3>
            <div class="ranking-list"  *ngIf="userOrderCountTopList.length > 0">
              <div class="ranking-item" *ngFor="let item of userOrderCountTopList; let i = index">
                <div class="flex">
                  <div class="number" [ngClass]="i<3?'top-three':''">{{i + 1}}</div>
                  <div class="hide">{{item.userName}}</div>
                </div>
                <div>{{item.orderCount}}</div>
              </div>
            </div>
            <div *ngIf="userOrderCountTopList.length <= 0">
              <div>
                <span style="color: #999999">
                  暂无排名信息
                </span>
              </div>
            </div>
          </div>
          <div class="ranking" *ngIf="userInfo.roleId == roleIdEnum.MERCHANT || userInfo.roleId == roleIdEnum.SUB_ACCOUNT">
            <!-- 这里只计算合作伙伴直属的运营商交易笔数，不计算该合作伙伴下级的运营商-->
            <h3><span *ngIf="type == 'month'">{{year}}年度</span><span *ngIf="type=='day'">{{month}}月份</span>门店交易笔数排行</h3>
            <div class="ranking-list"  *ngIf="merchantOrderCountTopList.length > 0">
              <div class="ranking-item" *ngFor="let item of merchantOrderCountTopList; let i = index">
                <div class="flex">
                  <div class="number" [ngClass]="i<3?'top-three':''">{{i + 1}}</div>
                  <div class="hide">{{item.storeName}}</div>
                </div>
                <div>{{item.orderCount}}</div>
              </div>
            </div>
            <div *ngIf="merchantOrderCountTopList.length <= 0">
              <div>
                <span style="color: #999999">
                  暂无排名信息
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nz-tab>
    <nz-tab nzTitle="利润" [nzForceRender]="true" (nzSelect)="selectProfit()" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
      <div nz-row [nzGutter]="20">
        <div nz-col nzXs="24" nzSm="24" nzMd="18" nzLg="18" nzXl="18">
          <div id="dayProfit" #dayProfit *ngIf="type=='day'"></div>
          <div id="monthProfit" #monthProfit *ngIf="type=='month'"></div>
        </div>
        <div nz-col nzXs="24" nzSm="24" nzMd="6" nzLg="6" nzXl="6">
          <div class="ranking">
            <h3><span *ngIf="type == 'month'">{{year}}年度</span><span *ngIf="type=='day'">{{month}}月份</span>合作伙伴利润排行</h3>
            <div class="ranking-list" *ngIf="agencyTotalCommissionTopList.length > 0">
              <div class="ranking-item" *ngFor="let item of agencyTotalCommissionTopList; let i = index">
                <div class="flex">
                  <div class="number" [ngClass]="i<3?'top-three':''">{{i + 1}}</div>
                  <div class="hide">{{item.agencyName}}</div>
                </div>
                <div>{{item.totalCommission | number:'0.2-2'}}</div>
              </div>
            </div>
            <div *ngIf="agencyTotalCommissionTopList.length <= 0">
              <div>
                <span style="color: #999999">
                  暂无排名信息
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nz-tab>
  </nz-tabset>
  <ng-template #extraTemplate>
    <nz-radio-group [(ngModel)]="type" (ngModelChange)="radioChange()" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT || userInfo.roleId == roleIdEnum.MERCHANT || userInfo.roleId == roleIdEnum.SUB_ACCOUNT">
      <label nz-radio-button nzValue="month">按月</label>
      <label nz-radio-button nzValue="day">按天</label>
    </nz-radio-group>
  </ng-template>
</div>
